<template>
  <div>
    <Card>
      <p slot="title">会议室列表</p>
      <div slot="extra">
        <Button type="primary" @click="addRoom">创建会议室</Button>
      </div>
      <list-frm :loading="loading" :listData="listData" :pageNum="pageNum" @edit-call="onCancel"></list-frm>
    </Card>
    <page
      :total="total"
      :pageNum="pageNum"
      :pageSize="pageSize"
      @page-on-size="onPageSize"
      @page-on-change="pageChange"
    ></page>
    <Modal
      v-model="isAdd"
      title="新增会议室"
      :footer-hide="true"
      :width="60"
      @on-cancel="onCancel"
      :styles="{top:'0'}"
    >
      <add-from ref="addFrom" @on-success-valid="addSuccess"></add-from>
    </Modal>
  </div>
</template>

<script>
import listFrm from './room/list.vue'
import Page from '@/view/components/page/page.vue'
import AddFrom from './add/addFrm.vue'
import { getMeetRoom, addMeetRoom } from '@/api/meet'

export default {
  name: 'roomList',
  components: {
    listFrm,
    Page,
    AddFrom
  },
  data () {
    return {
      pageNum: 1,
      total: 0,
      pageSize: 10,
      loading: true,
      listData: [],
      isAdd: false
    }
  },
  mounted: function () {
    this.getMeetRoom()
  },
  methods: {
    pageChange (pageNum) {
      this.pageNum = pageNum
      this.getMeetRoom()
    },
    onPageSize (pageSize) {
      this.pageSize = pageSize
      this.getMeetRoom()
    },
    getMeetRoom () {
      this.loading = true
      const pageNum = this.pageNum
      const pageSize = this.pageSize
      getMeetRoom({ pageNum, pageSize })
        .then(res => {
          const data = res.data
          if (data.code === 200) {
            this.total = data.data.total
            this.listData = data.data.list
            this.loading = false
          } else {
            this.$Message.error(data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error('数据获取失败')
        })
    },
    addRoom () {
      this.isAdd = true
    },
    addSuccess (addForm) {
      addMeetRoom(addForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$refs.addFrom.success() // 新增成功
            this.$Message.success(res.data.message)
            this.isAdd = false
            this.getMeetRoom()
          } else {
            this.$refs.addFrom.fail()
            this.$Message.error(res.data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$refs.addFrom.fail()
          this.$Message.error('创建失败')
        })
    },
    onCancel () {
      this.getMeetRoom()
    }
  }
}
</script>

<style lang="" scoped>
</style>
